@charset "utf-8";
// --- 引入宏定义 ---
@import "_mixture.scss";

// --- 引入函数定义 ---
@import "_function.scss";

// --- 引入占位定义 ---
@import "_appoint.scss";

@-webkit-keyframes rock{
	0%{
		@include transform( translate( -50% , 0% ) );
	}
	100%{
		@include transform( translate( -50% , -200% ) );
		opacity: 1;
	}
}

@keyframes rock{
	0%{
		@include transform( translate( -50% , 0% ) );
	}
	100%{
		@include transform( translate( -50% , -200% ) );
		opacity: 1;
	}
}

.beats{
	position: relative;
	display: inline-block;
	&[data-content]{
		pointer-events: none;
	}

	&[data-content='+1']::after,
	&[data-content='-1']::after{
		position: absolute;
		top: 0;
		left: 50%;

		display: inline-block;

		content: attr(data-content);

		font-size: 0.8em;

		@include prefixCss3( animation , rock 1s ease forwards );

		opacity: 0;

		@include transform( translate( -50% , 0% ) );
	}

	&[data-content='+1']::after{
		color: #0eff02;
	}

	&[data-content='-1']::after{
		color: #ff0202;
	}
}